<template>
  <!--	滚动选择条 （班级）（学生）	-->
  <div class="roll">
    <!-- Swiper -->
    <div id="roll" class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="(Class,index) of teacherClass" :key="Class.id" :class="{'active':ind === index}"  class="swiper-slide" @click="getClassId(Class.id,Class.gradeId,Class.gradeClassName,index)">
          <p>
            {{Class.gradeClassName}}
          </p>
        </div>
      </div>
    </div>
  </div>
  <!--	滚动选择条结束	-->
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'
  import {mapState} from 'vuex'

  export default {
    name: "teacherClass",
    data(){
      return{
        ind:0,
      }
    },
    computed:{
      ...mapState(['teacherClass'])  //vuex 储存数据
    },
    mounted() {
      new Swiper('#roll',{
        slidesPerView:3,
      })
    },
    methods:{
      getClassId(classId,gradeId,className,index){
        this.ind = index
        this.$emit("data",{classId:classId,gradeId:gradeId,className:className})

      }
    }

    }
</script>

<style scoped>
  /* 班级滚动条*/
  .roll{ width: 100%; height: 3.5rem; border-top:0.5rem solid #f2f2f2; border-bottom: 0.7rem solid #f2f2f2; background: #fff;}
  #roll p{line-height: 3.5rem; font-size: 1rem; text-align: center;}
  .active{ color:#00c08c; border-bottom:0.125rem solid #00c08c; box-sizing: border-box;}

</style>
